<template>
	<!-- 停车场列表-车位列表 -->
	<view class="">
		<view class="content">
			<view class="positioning" @click="getLocationInfo">
				<view class="">
					<text>东莞</text>
					<u-icon name="arrow-down-fill" size="16"></u-icon>
				</view>
				<view class="">
					28°C
				</view>
			</view>
			<view class="distance">
				<text>请选择车牌号</text>
				<u-icon name="arrow-down" size="16" class="arrow-right" color="#333333"></u-icon>
			</view>
		</view>
		<view class="wrap">
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#1E6DF2" ref="tabs" :list="list" :current="current" @change="change"
					:is-scroll="false" swiperWidth="750" bar-height="4" bar-width="112" gutter="0"
					:bar-style="barStyle"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<!-- 随机车位 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<view class="dataQuery">
							<view class="title">
								入场时间
							</view>
							<view class="datatime" @click="show = true">
								<u-picker mode="time" v-model="show" :params="params"></u-picker>
								<text>2023-09-02 099:19</text>
								<u-icon class="calendar" color="#999" size="36" name="calendar"></u-icon>
							</view>
						</view>
						<view class="dataQuery">
							<view class="title">
								出场时间
							</view>
							<view class="datatime" @click="show = true">
								<u-picker mode="time" v-model="show" :params="params"></u-picker>
								<text>结束时间</text>
								<u-icon class="calendar" color="#999" size="36" name="calendar"></u-icon>
							</view>
						</view>
						<view class="center-content">
							<view class="center-item">
								<text>停车时长</text>
								<text>4小时</text>
							</view>
							<view class="center-item coupon">
								<text>可用优惠卷</text>
								<view class="center-item">
									<text style="color: #FE6000;">-10元</text>
									<u-icon name="arrow-right"></u-icon>
								</view>

							</view>
							<view class="last">
								<view class="">
									<text style="margin-right: 24rpx;">停车费</text>
									<u-icon name="info-circle" color="#1677FE"></u-icon>
									<text style="color: #1677FE;margin-left: 8rpx;" @click="payTell">计费说明</text>
								</view>
								<text>约￥100</text>
							</view>
							<view class="space">
								<view class="space-title">
									<text
										style="font-weight: 700;font-size: 32rpx;color: #333333;margin-bottom: 24rpx;">金元花园</text>
									<text>北京市海淀区</text>
								</view>
								<view class="">
									<u-icon name="info-circle" color="#1677FE"></u-icon>
									<text style="color: #1677FE;margin-left: 8rpx;">车场详情</text>
								</view>
							</view>
						</view>
						<view class="" style="line-height: 48rpx; margin: 0 24rpx;">
							<text>温馨提示:</text>
							<view class="">
								1.<text style="color: #FE6000;">15分钟内可免费取消</text>，约定入场时间内未入场，订单将自动计费且保留15分钟;
							</view>

							<text>2.超出车位分享时间的部分按单价3倍收取服务费(无封顶)</text>
							<text>3.具体价格以实际车位价格为准</text>
							<view class="" style="margin-top: 40rpx;">
								<u-icon name="info-circle" color="#1677FE"></u-icon>
								<text style="color: #1677FE;margin-left: 16rpx;">担保费退还说明</text>
							</view>
						</view>
						<view class="bookNow">
							<view class="">
								担保费: <text style="color: #FE6000;">￥</text><text
									style="color: #FE6000;font-size: 46rpx;font-weight: 700;">10.00</text>
							</view>
							<view class="but" @click="bookNow">
								立即预定
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 自选车位 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<view class="dataQuery">
							<view class="title">
								车位号
							</view>
							<view class="datatime" @click="show = true">

								<text>请选择车位号</text>
								<u-icon class="arrow-down" color="#333" size="16" name="arrow-down"></u-icon>
							</view>
						</view>
						<view class="dataQuery">
							<view class="title">
								入场时间
							</view>
							<view class="datatime" @click="show = true">
								<u-picker mode="time" v-model="show" :params="params"></u-picker>
								<text>2023-09-02 099:19</text>
								<u-icon class="calendar" color="#999" size="36" name="calendar"></u-icon>
							</view>
						</view>
						<view class="dataQuery">
							<view class="title">
								出场时间
							</view>
							<view class="datatime" @click="show = true">
								<u-picker mode="time" v-model="show" :params="params"></u-picker>
								<text>结束时间</text>
								<u-icon class="calendar" color="#999" size="36" name="calendar"></u-icon>
							</view>
						</view>
						<view class="center-content">
							<view class="center-item">
								<text>停车时长</text>
								<text>4小时</text>
							</view>
							<view class="center-item coupon">
								<text>可用优惠卷</text>
								<view class="center-item">
									<text style="color: #FE6000;">-10元</text>
									<u-icon name="arrow-right"></u-icon>
								</view>

							</view>
							<view class="last">
								<view class="">
									<text style="margin-right: 24rpx;">停车费</text>
									<u-icon name="info-circle" color="#1677FE"></u-icon>
									<text style="color: #1677FE;margin-left: 8rpx;" @click="payTell">计费说明</text>
								</view>
								<text>约￥100</text>
							</view>
							<view class="space">
								<view class="space-title">
									<text
										style="font-weight: 700;font-size: 32rpx;color: #333333;margin-bottom: 24rpx;">金元花园</text>
									<text>北京市海淀区</text>
								</view>
								<view class="">
									<u-icon name="info-circle" color="#1677FE"></u-icon>
									<text style="color: #1677FE;margin-left: 8rpx;">车场详情</text>
								</view>
							</view>
						</view>
						<view class="" style="line-height: 48rpx; margin: 0 24rpx;">
							<text>温馨提示:</text>
							<view class="">
								1.<text style="color: #FE6000;">15分钟内可免费取消</text>，约定入场时间内未入场，订单将自动计费且保留15分钟;
							</view>

							<text>2.超出车位分享时间的部分按单价3倍收取服务费(无封顶)</text>
							<text>3.具体价格以实际车位价格为准</text>
							<view class="" style="margin-top: 40rpx;">
								<u-icon name="info-circle" color="#1677FE"></u-icon>
								<text style="color: #1677FE;margin-left: 16rpx;">担保费退还说明</text>
							</view>
						</view>
						<view class="bookNow">
							<view class="">
								担保费: <text style="color: #FE6000;">￥</text><text
									style="color: #FE6000;font-size: 46rpx;font-weight: 700;">10.00</text>
							</view>
							<view class="but" @click="bookNow">
								立即预定
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<text>
		</text>
		<!-- 计费弹窗 -->
		<u-popup v-model="showPopup" mode="bottom" border-radius="24" :closeable="true">
			<view class="popup">
				<view class="title">计费说明</view>
				<view class="sure">
					<text>
						1.进场开始计费;
						2.开启自动计费的车场，超过预留星进场时间自动计费;
						3.每15分钟为一个计费单位;不足15分钟按15分钟算。
						4.超过车位放租时间未离开的，超价出部分时问需缴纳超时服务费
						5.详细请查看《共享停车计费说明》
					</text>
				</view>
			</view>
		</u-popup>
		<!-- 选择车位 -->
		<u-popup v-model="showParking" mode="bottom" border-radius="24" :closeable="true">
			<!-- 两种情况,有无车位 -->
			<view class="popup">
				<view class="title" style="margin-bottom: 40rpx;">选择车位</view>
				<view class="parkingSpace" v-for="item in 3" @click="parkingDetail">
					<image src="" mode=""></image>
					<view class="center">
						<view class="parking-number">
							停车位:B33
						</view>
						<view class="start-time">
							可停至:2023-08-20 09:19
						</view>
					</view>
				</view>
				
			</view>

        <!-- 无车位-推荐 -->
			<!-- <view>
				<view class="noParking">
					<image src="../../static/parkingLot/ikon1.png" mode=""></image>
					<text class="nospace">该停车场暂无车位</text>
					<text class="sell">为您推荐附近停车场</text>
				</view>
				<view class="sellList">
					<view class="listItem" v-for="item in 3">
						<view class="">
							<view style="font-weight: 700;font-size: 32rpx;color: #333333;margin-bottom: 24rpx;">极乐主义停车场
							</view>
							<view class="">
								<text>503m</text>
								<text style="margin: 0 24rpx;">|</text>
								<text>山西省运城市</text>
							</view>
						</view>
						<view class="map">
							导航
						</view>
					</view>

				</view>
			</view> -->

		</u-popup>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '随机车位'
					},
					{
						name: '自选车位'
					}
				],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				barStyle: {
					marginBottom: '-4rpx'
				},
				show: false,
				showPopup: false,
				showParking: false,
				mode: 'range',
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
			}
		},
		onLoad() {

		},
		methods: {
			change(index) {
				this.swiperCurrent = index;
				console.log(index)
				if (index == 1) {
					this.showParking = true
				}

			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			payTell() {
				this.showPopup = true
			},
			bookNow() {
				// 预约成功跳转详情appointmentDetails
				uni.navigateTo({
					url: "../../pagesA/parkingLot/appointmentDetails"
				})
			},
			parkingDetail(){
				uni.navigateTo({
					url:"/pages/parkingReservation/index"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'detail.scss'
</style>